<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display隐藏与显示</title>
    <style>
        /*
            display:设置对应的元素隐藏或者显示
            其值有三种
                none:隐藏对应的元素,隐藏之后,隐藏的元素不再占用空间
                block:以块级元素的方式进行显示
                inline:以行级元素的方式进行显示
        */
        ol{
            display: none;
        }
        div{
            display: inline;
        }
        span{
            display: block;
        }
    </style>
</head>
<body>
<h1>第一章</h1>
<ol style="display: block;">
    <li>第一节</li>
    <li>第二节</li>
    <li>第三节</li>
</ol>
<h1>第二章</h1>
<ol>
    <li>第一节</li>
    <li>第二节</li>
    <li>第三节</li>
</ol>
<h1>第三章</h1>
<ol>
    <li>第一节</li>
    <li>第二节</li>
    <li>第三节</li>
</ol>
<hr/>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<hr/>
<span>第1个span</span>
<span>第2个span</span>
<span>第3个span</span>
</body>
</html>